<template>
  <footer class="footer" v-if="list.length>0">
    <span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
    <ul class="filters">
      <li>
        <a @click="$emit('changType','all')" :class="{selected: type==='all'}" class="selected" href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click="$emit('changType','no')" :class="{selected:type==='no'}" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="$emit('changType','yes')" :class="{selected:type==='yes'}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button v-show="isshowClear" @click='clear' class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
export default {
props: {
  list: {
    type: Array,
    required: true,
  },
   type: String
},
computed: {
  leftCount(){
     // 统计的未完成的任务的数量
  const arr= this.list.filter(item =>!item.isDone)
    return arr.length
  },
  // 如果list中有一个或者多个完成的任务，就应该显示
  isshowClear(){
    return this.list.some(item =>item.isDone)
  }
},
methods: {
  // 触发clear事件
  clear(){
    this.$emit("clear")
  }
}
}
</script>